<template>
  <div>
    <h3 class="register-title">
      <el-icon><Document /></el-icon>
      <p class="title-text">看诊记录</p>
    </h3>
    <el-divider />
    <div class="wy-filter">
      <el-input placeholder="请输入患者病历号 " v-model="searchValue.caseNumber"></el-input>
      <el-input placeholder="请输入患者姓名 " v-model="searchValue.realName"></el-input>
      <el-select style="width: 150px; margin-right: 10px" v-model="searchValue.visitState">
        <el-option :value="1" label="已挂号"></el-option>
        <el-option :value="2" label="已接诊"></el-option>
        <el-option :value="3" label="已结束"></el-option>
        <el-option :value="4" label="已退号"></el-option>
      </el-select>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
    <el-table :data="tableData.records" border>
      <el-table-column label="序号">
        <template #default="scope">
          <span>{{scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="患者姓名" prop="realName"></el-table-column>
      <el-table-column label="患者病历号" prop="caseNumber"></el-table-column>
      <el-table-column label="操作" width="240px" >
        <template #default="scope">
          <template v-if="scope.row.visitState === 2">
            <el-button type="primary" size="small" plain @click="update(scope.row.id)">更新病历</el-button>
            <el-button type="primary" size="small" plain @click="change(scope.row.id)">切换病人</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        style="margin-top: 10px;"
        background
        :total="tableData.total"
        v-model:page-size="params.pageSize"
        v-model:current-page="params.pageNo"
        @change="getTableData"></el-pagination>
  </div>
</template>

<script setup>
import { get, post } from '@/util/axios'
import { reactive, ref } from 'vue'
import { url } from './api'
import { RegisterStore } from '@/stores/counter'
import router from '@/router'
import { Document } from "@element-plus/icons-vue"
const registerStore = RegisterStore()
const tableData = reactive({
  records: [],
  pages: 0,
  total: 0
})
const params = reactive({
  pageNo: 1,
  pageSize: 10,
  realName: '',
  caseNumber: '',
  visitState: 2
})
const searchValue = reactive({
  realName: '',
  caseNumber: '',
  visitState: null
})
getTableData()
function search () {
  params.pageNo = 1
  params.realName = searchValue.realName
  params.caseNumber = searchValue.caseNumber
  params.visitState = searchValue.visitStates
  getTableData()
}
function getTableData () {
  get(url.list, params, content => {
    console.dir(content)
    tableData.records = content.records
    tableData.pages = content.pages
    tableData.total = content.total
  })
}
function update(id) {
  get(url.getById, { id }, content => {
    registerStore.set(content)
    router.push({
      path: '/medical',
      query: { id }
    })
  })
}
function change(id) {
  get(url.getById, { id }, content => {
    registerStore.set(content)
    ElMessage.success(`已经将病人切换为${content.realName}`)
  })
}
</script>

<style scoped lang="scss">
.register-title {
  display: flex;
  height: 40px;
  align-items: center;
  .title-text {
    margin-left: 5px;
  }
}
</style>
